<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../public/css/general.css">
    <link rel="stylesheet" href="../../../public/css/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../../../public/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../public/css/login.css">
    <title>白蔬贞</title>
</head>
<body>
<div id="login">
    <div class="mask" v-if="isShowMask"></div>
    <div class="top-bar" :class="{'top-bar_w': show=='password'}">
        <a href="javascript:;" @click="goBack()">
            <i class="iconfont">&#xe665;</i>
        </a>
        <span v-text="tip">登录</span>
    </div>
    <div class="header" v-if="show!='password'">
        <img class="logo" src="../../../public/images/logo.png" alt="logo">
    </div>
    <div class="form-div" :class="{'form-div_p': show=='password'}">
        <!--登录表单-->
        <div class="login-form" v-if="show=='login'">
            <div class="form-row">
                <span>
                    <label for="tel">
                        <!--<i class="iconfont iconfont-g">&#xe604;</i>-->
                        <img src="../../../public/images/phone.png" alt="手机号码">手机号码：
                    </label>
                    <input type="tel" id="tel" name="tel" v-model.trim="loginForm.tel" placeholder="输入11位手机号码">
                </span>
            </div>
            <div class="form-row">
                <span>
                    <label for="password">
                        <!--<i class="iconfont iconfont-g">&#xe6a0;</i>-->
                        <img src="../../../public/images/lock.png" alt="密码">密&nbsp; &nbsp; &nbsp; &nbsp;码：
                    </label>
                    <!--密码加密-->
                    <input type="password" id="password" name="password" v-model.trim="loginForm.password"
                           v-if="!loginForm.isShow">
                    <!--<i class="iconfont iconfont-g iconfont-eye" v-if="!loginForm.isShow" @click="loginForm.isShow=!loginForm.isShow">&#xe7d2;</i>-->
                    <img class="img-eye" src="../../../public/images/show.png" alt="显示密码" v-if="loginForm.isShow"
                         @click="loginForm.isShow=!loginForm.isShow">
                    <!--显示密码-->
                    <input type="text" id="password" name="password" v-model.trim="loginForm.password"
                           v-if="loginForm.isShow">
                    <!--<i class="iconfont iconfont-gray iconfont-eye" v-if="loginForm.isShow" @click="loginForm.isShow=!loginForm.isShow">&#xe6df;</i>-->
                    <img class="img-eye" style="bottom: 0;" src="../../../public/images/hide.png" alt="隐藏密码"
                         v-if="!loginForm.isShow" @click="loginForm.isShow=!loginForm.isShow">
                </span>
            </div>
            <p><a href="javascript:;" @click="showPassword()">忘记密码了></a></p>
            <div class="form-btn-row">
                <button class="login-btn" @click="login()">登录</button>
            </div>
            <div class="form-btn-row form-btn-row02">
                <button class="register-btn" @click="showRegister()">注册</button>
            </div>
        </div>
        <!--注册表单-->
        <div class="register-form" v-if="show=='register'">
            <div class="form-row">
                <label for="registerForm_tel">
                    手机号码：
                </label>
                <input type="tel" id="registerForm_tel" name="tel" v-model.trim="registerForm.tel"
                       placeholder="输入11位手机号码">
            </div>
            <div class="form-row">
                <span>
                    <label for="register_validCode">
                        验&nbsp; 证&nbsp; 码：
                    </label>
                    <input type="tel" id="register_validCode" name="validCode" v-model.trim="registerForm.validCode">
                    <button class="code-btn" v-text="registerForm.codeMsg" :disabled="registerForm.isDisabled"
                            :class="{'code-btn_disabled': registerForm.isDisabled}" @click="getValidCode(registerForm)">获取验证码</button>
                </span>
            </div>
            <div class="form-row">
                <label for="register_inviteCode">
                    邀&nbsp; 请&nbsp; 码：
                </label>
                <input type="tel" id="register_inviteCode" name="inviteCode" v-model.trim="registerForm.inviteCode">
            </div>
            <div class="form-row">
                <span>
                    <label for="register_password">
                        密&nbsp; &nbsp; &nbsp; &nbsp;码：
                    </label>
                    <!--密码加密-->
                    <input type="password" id="register_password" name="password" v-model.trim="registerForm.password"
                           v-if="!registerForm.isShow">
                    <!--<i class="iconfont iconfont-g iconfont-eye" v-if="!registerForm.isShow" @click="registerForm.isShow=!registerForm.isShow">&#xe7d2;</i>-->
                    <img class="img-eye" src="../../../public/images/show.png" alt="显示密码" v-if="registerForm.isShow"
                         @click="registerForm.isShow=!registerForm.isShow">
                    <!--显示密码-->
                    <input type="text" id="register_password" name="password" v-model.trim="registerForm.password"
                           v-if="registerForm.isShow">
                    <!--<i class="iconfont iconfont-gray iconfont-eye" v-if="registerForm.isShow" @click="registerForm.isShow=!registerForm.isShow">&#xe6df;</i>-->
                    <img class="img-eye" style="bottom: 0;" src="../../../public/images/hide.png" alt="隐藏密码"
                         v-if="!registerForm.isShow" @click="registerForm.isShow=!registerForm.isShow">
                </span>
            </div>
            <div class="form-row">
                <label for="register_repeatPassword">
                    重复密码：
                </label>
                <input type="password" id="register_repeatPassword" name="repeatPassword"
                       v-model.trim="registerForm.repeatPassword">
            </div>
            <div class="form-btn-row">
                <button class="login-btn" @click="register()">注册</button>
            </div>
        </div>
        <!--找回密码表单-->
        <div class="password-form" v-if="show=='password'">
            <div class="form-row">
                <label for="passwordForm_tel">
                    手机号码：
                </label>
                <input type="tel" id="passwordForm_tel" name="tel" v-model.trim="passwordForm.tel"
                       placeholder="输入11位手机号码">
            </div>
            <div class="form-row">
                <span>
                    <label for="passwordForm_validCode">
                        验&nbsp; 证&nbsp; 码：
                    </label>
                    <input type="tel" id="passwordForm_validCode" name="validCode"
                           v-model.trim="passwordForm.validCode">
                    <button class="code-btn" v-text="passwordForm.codeMsg" :disabled="passwordForm.isDisabled"
                            :class="{'code-btn_disabled': passwordForm.isDisabled}" @click="getValidCode(passwordForm)">获取验证码</button>
                </span>
            </div>
            <div class="form-row">
                <span>
                    <label for="passwordForm_password">
                        新&nbsp; 密&nbsp; 码：
                    </label>
                    <!--密码加密-->
                    <input type="password" id="passwordForm_password" name="password"
                           v-model.trim="passwordForm.password" v-if="!passwordForm.isShow">
                    <!--<i class="iconfont iconfont-g iconfont-eye" v-if="!passwordForm.isShow" @click="passwordForm.isShow=!passwordForm.isShow">&#xe7d2;</i>-->
                    <img class="img-eye" src="../../../public/images/show.png" alt="显示密码" v-if="passwordForm.isShow"
                         @click="passwordForm.isShow=!passwordForm.isShow">
                    <!--显示密码-->
                    <input type="text" id="passwordForm_password" name="password" v-model.trim="passwordForm.password"
                           v-if="passwordForm.isShow">
                    <!--<i class="iconfont iconfont-gray iconfont-eye" v-if="passwordForm.isShow" @click="passwordForm.isShow=!passwordForm.isShow">&#xe6df;</i>-->
                    <img class="img-eye" style="bottom: 0;" src="../../../public/images/hide.png" alt="隐藏密码"
                         v-if="!passwordForm.isShow" @click="passwordForm.isShow=!passwordForm.isShow">
                </span>
            </div>
            <div class="form-row">
                <label for="passwordForm_repeatPassword">
                    重复密码：
                </label>
                <input type="password" id="passwordForm_repeatPassword" name="repeatPassword"
                       v-model.trim="passwordForm.repeatPassword">
            </div>
        </div>
    </div>
    <div class="form-btn-row" v-if="show=='password'">
        <button class="login-btn" @click="findPassword()">确定</button>
    </div>
</div>
<script src="../../../public/js/vue.js"></script>
<script src="../../../public/css/mint-ui/lib/index.js"></script>
<script src="../../../public/js/store.js"></script>
<script src="../../../public/js/login.js"></script>
</body>
</html>